<template>
  <div>
    <div class="list-item" v-for="(item,index) in datas" :key="index">
      <span class="school">{{ item.type_name }}</span>
      <Row>
        <Col :md="6" class="img-box">
          <router-link tag="div" :to="{path:'/info',query:{id:item.id}}">
            <img class="list-img" :src="global.serviceUrl + item.src|defaultImg" alt="暂无图片">
          </router-link>
        </Col>
        <Col :md="18">
          <div class="list-info">
            <router-link
              :to="{path:'/info',query:{id:item.id}}"
              class="list-header"
            >{{ item.title }}</router-link>
            <p class="list-text">{{ item.introduct }}</p>
            <div class="list-other">
              <div class="each">
                <Icon type="ios-alarm-outline"/>
                &nbsp;{{ item.create_time|defaultDate }}
              </div>
              <div class="each">
                <Icon type="ios-eye-outline"/>
                &nbsp;{{ item.see }}
              </div>
              <div class="each">
                <Icon type="ios-brush-outline"/>
                &nbsp;{{ item.username }}
              </div>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { formatDate } from "@/config/api";
export default {
  name: "ListItem",
  props: ["datas"],
  filters: {
    defaultImg(val) {
      if (val) {
        return val;
      } else {
        return "static/default/default.png";
      }
    },
    defaultDate(val) {
      return formatDate(val);
    }
  }
};
</script>
<style scoped>
/* 列表组件 */
.list-item {
  margin: 10px 0;
  padding: 5px 0;
  border-bottom: 1px dashed #f2f2f2;
  position: relative;
}
.school {
  position: absolute;
  top: 5px;
  left: 0;
  padding: 2px 5px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  color: #fff;
  z-index: 100;
  font-size: 10px !important;
}
.img-box {
  overflow: hidden;
}
.list-img {
  height: 140px;
  width: 100%;
  border-radius: 2px;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  -o-transition: transform 1s;
}
.list-img:hover {
  transform: scale(2);
  -moz-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
}
.list-info {
  padding: 0 5px;
}
.list-other-text {
  width: 100%;
  text-align: right;
}
.list-header {
  font-size: 16px;
  color: #333;
  cursor: pointer;
}
.list-header:hover {
  color: #2db7f5;
}
.list-text {
  padding: 8px 5px;
  font-size: 14px !important;
}
.list-other {
  display: flex;
  flex-flow: row wrap;
}
.each {
  flex: 1;
}
</style>
